<template>
<div class="ui dimmer page transition" :class="{active: active}" @click="oncancel">
    <div class="ui modal visible active">
        <div class="header"><i class="icon remove" @click="oncancel"></i></div>
        <div class="content" @click.stop="">
            <div class="ui from segment">
                <label>日期范围</label>
                <div class="fields inline">
                    <div class="field">
                        <myDatepicker :date="start_time" :limit="limit"></myDatepicker><span> -- </span>
                        <myDatepicker :date="end_time" :limit="limit"></myDatepicker>
                    </div>
                </div>
                <div class="fields inline">
                    <label>作用时间：</label>
                    <div class="ui checkbox weekdayInput" v-for='item in weekday'>
                        <input type="checkbox" name="weekday" :value="item.value" v-model="weekdaySelect" @click='checkboxclick(item.value)'>
                        <label>{{item.label}}   </label>
                    </div>
                </div>


                <template v-for='item in dateShowContent' v-if='!item.disabled'>
						<template v-if='item.child'>
							<span class="parent-label">{{item.label}}</span>
							<div class="fields inline" >
								<div class="ui field input" >
								  <label v-for='child in item.child'>{{child.label}}：<input type="number" :placeholder="`请输入${child.label}`" v-model='stock[item.name][child.name]'></label>
								</div>
							</div>
						</template>
                <div class="field" v-else>
                    <div class="ui input">
                        <label>{{item.label}}：<input type="number" :placeholder="`请输入${item.label}`" v-model='stock[item.name]'></label>
                    </div>
                </div>
                </template>





                <!-- <div class="fields">
                    <label>状态：</label>
                    <div class="ui radio checkbox">
                        <input type="radio" value="1" v-model='stock.ol'>
                        <label>可售卖</label>
                    </div>
                    <div class="ui radio checkbox">
                        <input type="radio" value="0" v-model='stock.ol'>
                        <label>不可售卖</label>
                    </div>
                </div> -->
                <div class="ui  vertical masthead center aligned segment">
                    <button class="ui secondary button" @click='onsubmit'>确认 </button>
                    <button class="ui button" @click="oncancel">取消 </button>
                </div>
            </div>
        </div>
    </div>

</div>
</template>
<script>
import tool from 'src/util/tool';
import util from '_util/index';

import tFields from 'components/tunit/tFields'
import editCom from 'components/edit/editCom'
import myDatepicker from 'components/common/vue-datepicker'
export default {
    data() {
        return {
            vo: {},
            start_time: {
                time: ''
            },
            end_time: {
                time: ''
            },
            dayData: {},
            stock: {
                // ol: 1,
            },
            limit: [{
                    type: 'weekday',
                    available: [1, 2, 3, 4, 5, 6, 0]
                },
                {
                    type: 'fromto',
                    from: new Date(new Date().getTime() - 60 * 60 * 24 * 1000),
                    to: new Date(new Date().getTime() + 60 * 60 * 24 * 180 * 1000)
                }
            ],
            weekdaySelect: [],
            weekday: [{
                    label: '全部',
                    value: 'all'
                }, {
                    label: '星期日',
                    value: 0
                }, {
                    label: '星期一',
                    value: 1
                }, {
                    label: '星期二',
                    value: 2
                },
                {
                    label: '星期三',
                    value: 3
                }, {
                    label: '星期四',
                    value: 4
                }, {
                    label: '星期五',
                    value: 5
                }, {
                    label: '星期六',
                    value: 6
                },
            ]
        }
    },
    components: {
        tFields,
        myDatepicker
    },
    methods: {
        checkboxclick(value) {
            //日期复选框点击
            if (value === 'all') {
                if (this.weekdaySelect.length === 7) {
                    this.weekdaySelect = []
                } else {
                    this.weekdaySelect = ['all', 0, 1, 2, 3, 4, 5, 6]
                }
            } else {
                this.weekdaySelect.remove('all');
            }
        },
        closepop() {
            this.$emit("onhide");
        },
        checkInput() {
            //检查输入
            if ((this.start_time.time + '' + this.end_time.time).length < 20) {
                util.showMsg(this, 'error', '请选择日期范围');
                return false;
            }
            if (this.weekdaySelect.length === 0) {
                util.showMsg(this, 'error', '请选择作用时间');
                return false;
            }
            let arrayBool = true;
            this.dateShowContent.forEach(item => {
                if (!item.disabled) {
                    if (item.child) {
                        item.child.forEach(child => {
                            if (!(this.stock[item.name][child.name] * 1 >= 0)) {
                                util.showMsg(this, 'error', `请输入正确的${child.label}`);
                                arrayBool = false;
                            }
                        })
                    } else {
                        if (!(this.stock[item.name] * 1 >= 0)) {
                            util.showMsg(this, 'error', `请输入正确的${item.label}`);
                            arrayBool = false;
                        }
                    }
                }
            })
			if(Object.keys(this.stock).indexOf('sale_price')>-1){
				let fc_serv = this.stock.fc_serv||0,
				fc_serv_up = this.stock.fc_serv_up||0,
				fc_sp = this.stock.fc_sp||0,
				sale_price = this.stock.sale_price||0;
				if((fc_serv*1+fc_serv_up*1+fc_sp*1)>sale_price){
					arrayBool = false;
					util.showMsg(this, 'error', `分成不得大于售价`);
				}
			}

            return arrayBool
        },
        onsubmit() {
            let start_time = new Date(this.start_time.time),
                end_time = new Date(this.end_time.time),
                weekdaySelect = this.weekdaySelect;
            if (this.checkInput()) {
                if (start_time > end_time) {
                    let a = start_time;
                    start_time = end_time;
                    end_time = a;
                }
                for (var i = 0; i <= this.dayTotal; i++) {
                    let date = new Date(start_time.getTime() + 24 * 60 * 60 * 1000 * i)
                    if (weekdaySelect.indexOf(date.getDay()) > -1) {
                        date = tool.dateFormat(date, 'yyyy-MM-dd');
                        this.dayData[date] = {
                            date: date,
                            ...this.stock
                        }
                    }
                }
                this.$emit('updatedayData', this.dayData);
            }
        },
        onchange(filed, form) {
            this.$emit('onchange', filed, form)
        },
        oncancel() {
            this.$emit('oncancel');
            this.closepop();
        },
        showDatePiker() {

        }
    },
    props: {
        dateShowContent: {
            type: Array,
            default () {
                return []
            }
        },
        active: {
            type: Boolean,
            default () {
                return false
            }
        }
    },
    watch: {
        data: {
            immediate: true,
            handler(val) {}
        },
        active: {
            immediate: true,
            handler(val) {
                this.isActive = val;
            }
        },
        isActive(val) {
            this.$emit(val ? "onshow" : "onhide", this.vo);
        },
    },
    computed: {
        refundTimeHour() {
            let data = [];
            for (var i = 0; i < 24; i++) {
                let str = (i + 100).toString().slice(1)
                data.push(str)
            };
            return data
        },
        dayTotal() {
            //选中日期相差
            let dd = (this.start_time.time + '' + this.end_time.time).length;
            if (dd > 19) {
                let total = (new Date(this.start_time.time).getTime() - new Date(this.end_time.time).getTime()) / (24 * 60 * 60 * 1000);
                return Math.abs(total)
            } else {
                return 0
            }
        },
        component_name() {
            return this.page || "tFields"
        }
    },
    created() {
        if (this.dateShowContent) {
            this.dateShowContent.forEach(item => {
                if (!item.disabled) {
                    if (item.child) {
                        this.$set(this.stock, item.name, {})
                        item.child.forEach(child => {
                            this.$set(this.stock[item.name], child.name, 0)
                        })
                    } else {
                        this.$set(this.stock, item.name, 0)
                    }
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import "../../../common/style/mixin";
.ui.dimmer > .ui.modal {
    background-color: transparent;
    height: 100%;
    position: relative;
    margin: 0 auto !important;
    left: inherit;
    top: inherit;
    @_top: 15%;
    @_bottom: 3%;
    .field,
    .fields {
        margin-top: 10px;
        label {
            margin-right: 5px;
        }
    }
    .weekdayInput {
        margin-right: 10px;
    }
    .parent-label {
        margin-top: 15px;
        display: block;
        font-weight: 500;
    }
    .header {
        background-color: transparent;
        text-align: right;
        padding: 20px 0;
        position: absolute;
        left: 0;
        right: 0;
        top: @_top;
        margin-top: -66px;
        .icon {
            color: #fff;
            cursor: pointer;
        }
    }
    .content {
        position: absolute;
        top: @_top;
        height: auto;
        max-height: 100% - @_bottom - @_top;
        overflow: auto;
    }
}
</style>
